<template>
  <div class="container">
    <div class="header" @click="$router.back(-1)">
      <i class="el-icon-arrow-left c-font-b"></i>
      <span>菜品详情</span>
    </div>
    <el-form ref="formRef" :model="detailForm" label-width="120px">
      <el-form-item label="菜品图片：" prop="images">
        <img :src="detailForm.images" alt="" srcset="" />
      </el-form-item>
      <el-form-item label="编号：" prop="number">
        <div>{{ detailForm.number }}</div>
      </el-form-item>
      <el-form-item label="菜品名称：" prop="name">
        <div>{{ detailForm.name }}</div>
      </el-form-item>
      <el-form-item label="菜品归类：" prop="type">
        <div>{{ detailForm.type === 1 ? "荤菜" : "素菜" }}</div>
      </el-form-item>
      <el-form-item label="所属食堂：" prop="canteen">
        <div>{{ canteenDetail.name }}</div>
      </el-form-item>
      <el-form-item label="试吃时间：" prop="tryTime">
        <div>{{ detailForm.tryTime }}</div>
      </el-form-item>
      <el-form-item label="试吃定价：" prop="tryPrice">
        <div>{{ detailForm.tryPrice }}元</div>
      </el-form-item>
      <el-form-item label="试吃图片：">
        <img
          style="margin-right: 10px"
          v-for="(img, index) in imgs"
          :key="index"
          :src="img.url"
          alt=""
          srcset=""
        />
      </el-form-item>
      <el-form-item label="菜品详情：" prop="details">
        <div v-html="detailForm.details"></div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { foodAuditDetail } from "../../../api/canteen/audit";

export default {
  setup() {
    const route = useRoute();
    const foodId = ref("");
    // 食堂信息
    const canteenDetail = ref({});
    // 菜品详情表单
    const detailForm = ref({});
    const imgs = ref([]);
    onMounted(() => {
      foodId.value = route.query.id;
      getFoodDetail();
    });
    // 获取菜品详情
    function getFoodDetail() {
      foodAuditDetail(foodId.value).then((res) => {
        detailForm.value = res.data;
        canteenDetail.value = detailForm.value.canteen;
        const tryImgs = res.data.tryImages.split(",");
        tryImgs.map((item) => {
          imgs.value.push({ url: item });
        });
        console.log(imgs.value);
      });
    }
    return {
      detailForm,
      imgs,
      canteenDetail,
    };
  },
};
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #edeff3;
}
</style>
